<template>
<!-- v-if="flag" -->
	<div  class="main">
    <nav-bar customBack @customBack="onBack" />
    <div class="cont">
      <div mode="aspectFill" class="cont_bg" />
      <div class="cont_bg1"></div>
    </div>
    <div class="title">魔镜魔镜告诉我</div>
    <div class="tabs">
      <div 
        class="tab_list"
        v-for="item in list.free_framework_list"
        @click="fnGetContent(item)"
        :key="item.content_type">
        {{ item.title }}
        <img src="https://magic.mirror.source.axeastro.com/magic-mirror/arrow_next.png" alt="" class="next_btn">
      </div>
    </div>
    <div v-if="list.pay_framework_list && list.pay_framework_list.length" class="pay_cont pb-18">
      <div class="pay_title flex_center">解锁全部板块</div>
      <div class="flex_b_c flex_wrap pl-28 pr-26">
        <div class="pay_list flex_center flex-c mb-8" v-for="item in list.pay_framework_list" :key="item.id">
          <img class="lock" src="https://magic.mirror.source.axeastro.com/magic-mirror/icon_lock.png">
          {{ item.title }}
        </div>
      </div>
    </div>
    <div v-if="list.pay_framework_list && list.pay_framework_list.length" class="pay_btn" @click="onSubmit">9.9 元全部解锁</div>
    <content-mask :owned="owned" :isShow.sync="isShow" :content="current.content" :title="current.title" />
	</div>
</template>
<script>
import contentMask from '@/components/v2/contentMask'
import { getTitle, getContentByType, orderPay } from '@/api'
// import onPay from '@/utils/payment'
export default {
  components: { 
    contentMask,
  },
  data() {
    return {
      flag: false,
      active: 1, 
      current: {},
      list: {pay_framework_list: []},
      paySelfCard: false, // 是否支付自己得了
      owned: true,
      isShow: false,
      cardLockObj: {},
      timer: null
    }
  },
  computed: {
  },
  mounted() {
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  onLoad({ owned }) {
    try {
      this.owned = JSON.parse(owned)
    } catch (error) {
      this.owned = true
    }
    console.log(owned, this.owned, typeof this.owned,  typeof owned)
    this.fnGet()
  },
  methods: {
    async fnGet() {
      clearInterval(this.timer)
      console.log( this.owned, ' this.owned this.owned this.owned')
      let is_iphone = this.system === 'ios'
      const { code, data } = await getTitle({ owned: this.owned, is_iphone, version: 9 })
      if (code === 1000) {
        // this.list = data.pay_framework_list.concat(data.free_framework_list)
        let { pay_framework_list, free_framework_list } = data
        // 支付过自己的了
        if (this.paySelfCard && this.owned) {
          this.list = { free_framework_list: [ ...pay_framework_list, ...free_framework_list], pay_framework_list: [] }
        } else {
          this.list = { pay_framework_list, free_framework_list }
        }
        this.list.free_framework_list.forEach(({ content_type, content }) => {
          if (!this.cardLockObj[content_type] && content) {
            this.cardLockObj[content_type] = content
          }
        })
        this.flag = true
        this.$nextTick(() => {
          this.timer = setInterval(() => {
            let temp = this.active
            this.active = 0
            this.$nextTick(() => {
              this.active = temp === 1 ? 2 : 1
            })
          }, 8000)
        })
      }
    },
    async fnGetContent({ content_type, title }) {
      if (this.cardLockObj[content_type]) {
        this.current = { content: this.cardLockObj[content_type], title }
        this.isShow = true
        return false
      }
      uni.showToast({
        title: '魔镜分析中…请稍候',
        duration: 2500,
        icon: 'none'
      })
      setTimeout(async () => {
        const { code, data } = await getContentByType({ content_type, owned: this.owned })
        if (code === 1000) {
          this.cardLockObj[content_type] = data.content
          this.current = { content: data.content, title }
          this.isShow = true
        }
      }, 2500)
    },
   
    async onSubmit() {
      let channel = this.$storage.getStorage('channel')
      let query = channel ? { product_id: -1, pay_type: 10, channel } : { product_id: -1, pay_type: 10 }
      console.log('请求参数', query, '支付')
      const { code, data: {pay_data: data} } = await orderPay(query);
      if (code === 1000) {
        uni.requestPayment({
          provider: "wxpay", //支付类型（小程序）
          appId: data.appId,
          timeStamp: data.timeStamp, //后端返回的时间戳
          nonceStr: data.nonceStr, //后端返回的随机字符串
          package: data.package, //后端返回的prepay_id
          signType: data.signType, //后端签名算法,根据后端来,后端MD5这里即为MD5
          paySign: data.paySign, //后端返回的签名
          success: (res) => {
            if (res.errMsg === "requestPayment:ok") {
              if (this.owned) {
                this.paySelfCard = true
              }
              let { pay_framework_list, free_framework_list } = this.list
              this.list = { free_framework_list: [ ...pay_framework_list, ...free_framework_list], pay_framework_list: [] }
            }
          },
          fail: (err) => {
            console.log("支付失败", err)
          }
        })
      }
      // onPay().then(() => {
      //   if (this.owned) {
      //     this.paySelfCard = true
      //   }
      //   let { pay_framework_list, free_framework_list } = this.list
      //   this.list = { free_framework_list: [ ...pay_framework_list, ...free_framework_list], pay_framework_list: [] }
      // })
    },
    onBack() {
      uni.showModal({
        title: '温馨提示',
        content: '每次解锁后请查看完毕如需保存请自行保存内容，下次进入需要重新解锁。确认关闭？',
        success: function (res) {
          if (res.confirm) {
            uni.reLaunch({
              url: "/pages/home/index"
            })
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
      
      
    },
  }
}
</script>
<style lang="scss" scoped>
.main {
  padding-bottom: 20px;
  min-height: 100vh;
	background: #fff;
}

.cont {
  width: 160rpx;
  height: 280rpx;
  margin: -54rpx auto 40rpx;
  position: relative;
  z-index: 10;
  .cont_bg {
    position: absolute;
    width: 108rpx;
    height: 212rpx;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -46%);
    -webkit-clip-path: ellipse(41% 50% at 50% 50%);
    clip-path: ellipse(41% 50% at 50% 50%);
    background: url('https://magic.mirror.source.axeastro.com/magic-mirror/mirror.gif') no-repeat left top / cover;
  }
  .cont_bg1 {
    position: absolute;
    background: url('https://magic.mirror.source.axeastro.com/magic-mirror/lace_big.png') no-repeat top left/ cover;
    width: 100%;
    height: 100%;
  }
}
.title {
  font-family: pf_bold;
  font-weight: 600;
  font-size: 40rpx;
  color: #000000;
  line-height: 47rpx;
  text-align: center;
  font-style: normal;
  text-transform: none;
  margin-top: 24rpx;
}


.tabs {
  padding: 54rpx 54rpx 0px 54rpx;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .tab_list {
    width: 308rpx;
    height: 196rpx;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    border: 2rpx solid #000000;
    padding: 30rpx 32rpx 0 32rpx;
    font-family: pf_bold;
    margin-bottom: 32rpx;
    font-weight: 600;
    font-size: 32rpx;
    color: #000000;
    line-height: 38rpx;
    position: relative;
    .next_btn {
      position: absolute;
      width: 48rpx;
      height: 48rpx;
      right: 16rpx;
      bottom: 16rpx;
    }
  }
}
.pay_btn {
  width: 600rpx;
  height: 96rpx;
  margin: 0 auto 0;
  background: #000000;
  border-radius: 86rpx;
  text-align: center;
  line-height: 96rpx;
  font-family: pf_bold;
  font-weight: 600;
  font-size: 32rpx;
  color: #FFFFFF;
  text-align: center;
 
}



.pay_cont {
  width: 646rpx;
  margin: 0 auto 0;
  padding-top: 56rpx;
  background: url('https://magic.mirror.source.axeastro.com/magic-mirror/pay_content_bg.png') no-repeat left top/ 642rpx 684rpx;
  position: relative;
 
  .pay_title {
    width: 646rpx;
    font-family: pf_bold;
    margin-bottom: 52rpx;
    font-weight: 600;
    font-size: 40rpx;
    color: #000000;
    line-height: 56rpx;
    text-align: center;
    font-style: normal;
    text-transform: none;
    &:before {
      content: '';
      width: 54rpx;
      height: 20rpx;
      display: inline-block;
      background: url('https://magic.mirror.source.axeastro.com/magic-mirror/text_1.png') no-repeat left top/ cover;
      margin-right: 20rpx;
    }
    &:after {
      content: '';
      width: 54rpx;
      height: 20rpx;
      display: inline-block;
      background: url('https://magic.mirror.source.axeastro.com/magic-mirror/text_r.png') no-repeat left top/ cover;
      margin-left: 20rpx;
    }
  }
  .pay_list {
    width: 286rpx;
    height: 196rpx;
    padding: 0 37rpx;
    background: url('https://magic.mirror.source.axeastro.com/magic-mirror/lock_bg.png') no-repeat left top/ 283rpx 196rpx;
    font-weight: 600;
    font-size: 26rpx;
    color: #000;
    line-height: 36rpx;
    margin-bottom: 24rpx;
    text-align: center;
    .lock {
      width: 48rpx;
      height: 48rpx;
      margin-bottom: 8rpx;
    }
  }
}


</style>